/* Some CSS Setup - nothing to do with flexbox */
html {
    box-sizing: border-box;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  body {
    font-family: sans-serif;
    margin: 0;
    background-image: linear-gradient(260deg, #2376ae 0%, #c16ecf 100%);
  }
  
  a {
    color:white;
  }
  
  .plan ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .plan ul li {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding:10px;
  }
  
  .plan ul li:last-child {
    border-bottom: 0;
  }
  
  .plan a {
    text-decoration: none;
    background:#FEFF00;
    padding:10px;
    color:black;
    border-radius:4px;
  }
  
  
  .plan h2 {
    text-transform: uppercase;
    color:white;
    letter-spacing: 2px;
    text-shadow:3px 3px 0 rgba(0,0,0,0.1);
  }
  
  .price {
    font-size: 50px;
    font-family: serif;
    margin: 10px 0;
  }
  
  
  .pricing-grid {
    max-width:750px;
    margin: 0 auto;
    
    display: flex;
    align-items: center;
  
  }
  
  .plan {
    background-color: rgba(255,255,255,0.2);
    margin: 10px;
    flex: 1;
    text-align: center;
  
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    padding: 20px;
  }
  
  .plan > * {
    flex: 1;
  }
  
  .plan .cta {
    justify-self: stretch;
    align-self: stretch;
  }
  